<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天室</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/animate.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/chatroom.js"></script>
</head>
<style>
    div{
        border:1px red solid;
    }
</style>
<body>
<div class="container animated bounceInDown">
    <div class="row">
        <div class="col">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><img src="img/chatsmall.png" alt=""></li>
                    <li class="breadcrumb-item">倾心❤聊天室</li>
                    <li class="breadcrumb-item float-right" id="welcome">欢迎您~ tom</li>
                    <li class="breadcrumb-item" id="logout"><a href="#">注销</a></li>
                </ol>
            </nav>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-3">
            <div class="list-group" id="userlist">
                <a href="#" class="list-group-item list-group-item-action active">
                    聊天列表
                </a>
                <a href="#" class="list-group-item list-group-item-action" id="public">公共聊天室</a>
            </div>
        </div>
        <div class="col-lg-9">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <div class="btn-success" id="chattitle">公共聊天室</div>
                </div>
            </div>
            <div class="row pb-0">
                <div class="col-lg-12 pb-0">
<!--                    聊天窗口-->

                        <div class="form-group">
                            <textarea   onfocus="this.scrollTop = this.scrollHeight " class="form-control pb-0" id="showmsg"style="margin-top: 0px; margin-bottom: 0px; height: 366px;" rows="3">loading...
                            </textarea>
                        </div>

                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
<!--                    发送窗口-->

                    <div class="form-group">

                        <textarea class="form-control " id="sendmsg" rows="3" onkeydown="onTextareaKeyDown()"></textarea>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12 text-right">
                    <div class="btn btn-success" id="send">发送</div>
                </div>
            </div>
        </div>
    </div>
<!--    <div class="row">-->

<!--    </div>-->
</div>

</body>
</html>